import React from 'react';
import { Card, Form, Input, Select, Button, Space, Table, Tag } from 'antd';

// 支付方式字典（模拟）
const payTypeList = [
  { value: '1', label: '微信' },
  { value: '2', label: '支付宝' },
  { value: '3', label: '现金' },
  { value: '5', label: '会员卡' },
];

function getDictLabel(list, value) {
  const item = list.find((i) => String(i.value) === String(value));
  return item ? item.label : value;
}

// 模拟退款记录数据
const mockRefunds = [
  { id: 1, rs: 1, orderNumber: 'ORD202510110001', payType: '2', price: 5.0, resultCode: '200', resultInfo: '退款成功', createTime: '2025-10-11 12:30:00' },
  { id: 2, rs: 0, orderNumber: 'ORD202510100002', payType: '1', price: 12.5, resultCode: 'PENDING', resultInfo: '渠道处理中', createTime: '2025-10-10 09:16:42' },
  { id: 3, rs: -1, orderNumber: 'ORD202510090003', payType: '5', price: 8.0, resultCode: 'ERR_403', resultInfo: '校验失败', createTime: '2025-10-09 18:03:21' },
];

export default function OrderRefund() {
  const [form] = Form.useForm();
  const [loading, setLoading] = React.useState(false);
  const [page, setPage] = React.useState({ pageSize: 10, pageIndex: 1, totalSize: mockRefunds.length });
  const [search, setSearch] = React.useState({ orderNumber: '', payType: '' });
  const [allList] = React.useState(mockRefunds);
  const [refundRecordList, setRefundRecordList] = React.useState([]);

  React.useEffect(() => {
    form.setFieldsValue({ orderNumber: '', payType: '' });
    applySearch(1);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  function applySearch(newPageIndex = page.pageIndex, newPageSize = page.pageSize, nextSearch = search) {
    setLoading(true);
    const filtered = allList.filter((r) => (
      (!nextSearch.orderNumber || String(r.orderNumber).includes(nextSearch.orderNumber)) &&
      (!nextSearch.payType || String(r.payType) === String(nextSearch.payType))
    ));
    const start = (newPageIndex - 1) * newPageSize;
    const end = start + newPageSize;
    setRefundRecordList(filtered.slice(start, end));
    setPage({ pageIndex: newPageIndex, pageSize: newPageSize, totalSize: filtered.length });
    setLoading(false);
  }

  function onSubmit(values) {
    const next = { ...search, ...values };
    setSearch(next);
    applySearch(1, page.pageSize, next);
  }

  function resetSearch() {
    const next = { orderNumber: '', payType: '' };
    form.setFieldsValue(next);
    setSearch(next);
    applySearch(1, page.pageSize, next);
  }

  function onTableChange(pagination) {
    const newPageIndex = pagination.current || 1;
    const newPageSize = pagination.pageSize || page.pageSize;
    applySearch(newPageIndex, newPageSize);
  }

  const columns = [
    {
      dataIndex: 'rs',
      title: '状态',
      align: 'center',
      width: 140,
      render: (rs) => {
        if (rs === 1) return <Tag color="red">成功</Tag>;
        if (rs === -1) return <Tag color="default">失败</Tag>;
        return <Tag color="blue">Refunding</Tag>;
      },
    },
    { dataIndex: 'orderNumber', title: '订单号', align: 'center', width: 140 },
    { dataIndex: 'payType', title: '支付方式', align: 'center', width: 140, render: (v) => getDictLabel(payTypeList, v) },
    { dataIndex: 'price', title: '退款金额', align: 'center', width: 140 },
    { dataIndex: 'resultCode', title: '返回码', align: 'center', width: 140 },
    { dataIndex: 'resultInfo', title: '返回信息', align: 'center' },
    { dataIndex: 'createTime', title: '创建时间', align: 'center', width: 160 },
  ];

  return (
    <div className="order-refund">
      {/* 查询区域 */}
      <Card style={{ marginBottom: 12 }}>
        <Form form={form} layout="inline" onFinish={onSubmit}>
          <Form.Item name="orderNumber" label="订单号">
            <Input placeholder="输入订单号" allowClear />
          </Form.Item>
          <Form.Item name="payType" label="支付方式">
            <Select allowClear style={{ width: 200 }} options={payTypeList.map(i => ({ value: i.value, label: i.label }))} placeholder="选择支付方式" />
          </Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">查询</Button>
            <Button onClick={resetSearch}>重置</Button>
          </Space>
        </Form>
      </Card>

      {/* 列表区域 */}
      <Card className="vue-padding radius">
        <Table
          rowKey="id"
          loading={loading}
          dataSource={refundRecordList}
          columns={columns}
          bordered
          scroll={{ y: 638 }}
          pagination={{
            current: page.pageIndex,
            pageSize: page.pageSize,
            total: page.totalSize,
            showSizeChanger: true,
            showQuickJumper: true,
          }}
          onChange={onTableChange}
          locale={{ emptyText: '暂无数据' }}
          style={{ width: '100%' }}
        />
      </Card>
    </div>
  );
}